<!-- MessageCenter.vue (对应第一张图) -->
<template>
  <van-nav-bar title="消息中心" left-arrow @click-left="router.back()" />
  
  <van-pull-refresh v-model="loading" @refresh="fetchMessages">
    <van-cell-group inset>
      <van-cell 
        v-for="item in messageTypes" 
        :key="item.type"
        :title="item.title"
        :label="item.label"
        :to="item.route"
        is-link>
        <template #icon>
          <van-icon :name="item.icon" :color="item.color" size="20" class="mr-2" />
          <van-badge v-if="item.unread" :content="item.unread" />
        </template>
      </van-cell>
    </van-cell-group>
  </van-pull-refresh>

  <van-tabbar v-model="active">
    <!-- 底部导航保持不变 -->
    <van-tabbar-item icon="home-o" :to="'/HomePage'">首页</van-tabbar-item>
  <van-tabbar-item icon="column" :to="'/Health'">科普</van-tabbar-item>
  <van-tabbar-item icon="description" :to="'/messages'">消息</van-tabbar-item>
  <van-tabbar-item icon="contact" :to="'/Setup'">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter,useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const active = ref(4)
const loading = ref(false)

const messageTypes = ref([
  {
    type: 'consult',
    title: '在线咨询',
    label: '查看和医生的聊天记录',
    icon: 'chat-o',
    color: '#1989fa',
    unread: 3,
    route: '/ChatList'
  },
  {
    type: 'service',
    title: '消息服务',
    label: '查看最新消息',
    icon: 'envelop-o',
    color: '#ff976a',
    route: '/notifications'
  },
  {
    type: 'system',
    title: '系统消息',
    label: '系统消息提醒',
    icon: 'setting-o',
    color: '#07c160',
    route: '/SystemMessages'
  }
])

const fetchMessages = async () => {
  try {
    loading.value = true
    // 实际应调用API接口
    // const { data } = await axios.get('/api/messages')
  } finally {
    loading.value = false
  }
}

const goToChatList = () => {
  router.push('/chats')
}
</script>